<template>
  <div class="app-container-flex">
    <NewFullScreen
      v-model="showDialog"
      :title="title"
      @returnBack="$emit('returnModify')"
    >
      <template v-slot:full-button>
        <el-button @click="save('save')">保存</el-button>
        <el-button @click="save('saveAndCreate')">保存并新增</el-button>
      </template>
      <div class="model-panel">
        <div class="model-panel-title">
          <p>{{ $t('basic_information') }}</p>
        </div>
        <div class="model-panel-body">
          <!-- form -->
          <page-form
            class="paddingBox order-model-formBox flex_wrap_start_start"
            v-model:ref-obj="formInfo.ref"
            :data="formInfo.data"
            :field-list="formInfo.fieldList"
            :rules="formInfo.rules"
            :label-width="formInfo.labelWidth"
          >
            <template v-slot:form-deptName>
              <el-input
                v-model="formInfo.data.deptName"
                type="input"
                :disabled="true"
                :class="'not-mongolia'"
                placeholder="请选择使用部门"
              >
                <template #append>
                  <el-icon @click="openUseDeptWindow"><MoreFilled /></el-icon>
                </template>
              </el-input>
            </template>
            <template v-slot:form-supplierName>
              <el-input
                type="input"
                :disabled="true"
                :class="'not-mongolia'"
                placeholder="请选择供应商"
                v-model="formInfo.data.supplierName"
              >
                <template #append>
                  <el-icon @click="openSupplierWindow"><MoreFilled /></el-icon>
                </template>
              </el-input>
            </template>
            <template v-slot:form-inspectorName>
              <el-input
                v-model="formInfo.data.inspectorName"
                type="input"
                :disabled="true"
                class="not-mongolia"
                placeholder="请选择检查人"
              >
                <template #append>
                  <el-icon @click="openUseUserList"><MoreFilled /></el-icon>
                </template>
              </el-input>
            </template>
            <template v-slot:form-assetName>
              <el-input
                type="input"
                :disabled="true"
                class="not-mongolia"
                placeholder="请选择资产"
                v-model="formInfo.data.assetName"
              >
                <template #append>
                  <el-icon @click="openEquipmentWindow"><MoreFilled /></el-icon>
                </template>
              </el-input>
            </template>
            <template v-slot:form-filePathList>
              <UploadImg
                v-model:value="formInfo.data.filePathList"
                :action="action"
                :limit="5"
                :multiple="true"
                list-type="text"
                title="附件"
                :file-type="fileType"
                :response-fn="handleResponse"
              />
            </template>
          </page-form>
        </div>
      </div>

      <select-dept
        v-if="selectUseDeptInfo.visible"
        v-model:show-dialog="selectUseDeptInfo.visible"
        :query="selectUseDeptInfo.query"
        :check-box="false"
        :highlight-row="true"
        :saveEmpty="true"
        @callback="selectUseDeptCallback"
      />
      <select-supplier
        v-if="selectProductSupplier.visible"
        v-model:show-dialog="selectProductSupplier.visible"
        :query="selectProductSupplier.query"
        :check-box="false"
        :saveEmpty="true"
        :highlight-row="true"
        :api="selectProductSupplier.api"
        @callback="selectSupplierCallback"
      />
      <SelectUsers
        v-if="selectUseUserInfo.visible"
        v-model:showDialog="selectUseUserInfo.visible"
        :query="selectUseUserInfo.query"
        :api="getRrgUserList"
        :saveEmpty="true"
        :check-box="false"
        :highlight-row="true"
        @callback="selectUseUserCallBack"
      />
      <Select-asset
        v-if="selectAssetInfo.visible"
        v-model:show-dialog="selectAssetInfo.visible"
        :highlightRow="true"
        :checkBox="false"
        :saveEmpty="true"
        :query="selectAssetInfo.query"
        :filterInfoList="selectAssetInfo.filterInfoList"
        @callback="callBackAsset"
      />
    </NewFullScreen>
  </div>
</template>

<script setup name="assetDictModify">
import utils from '@/common/js/utils' // 公共方法
import {
  getInspectionRecordById,
  createInspectionRecord,
  updateInspectionRecord,
} from '@/api/quality'
import { getCategoryDetailsById } from '@/api/asset'
import { getSupplierPage } from '@/api/core'
import { getRrgUserList } from '@/api/base'
import axios from 'axios'
import SelectAsset from '@/components/SelectAsset/selectAsset'
const emits = defineEmits()
const { proxy } = getCurrentInstance()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  id: {
    type: [String, Number],
  },
  title: {
    type: String,
  },
})
const action = ref(axios.defaults.baseURL + '/pub/uploadfile')
const fileType = ref(['jpg', 'png', 'jpeg', 'pdf'])
const formInfo = reactive({
  ref: null,
  data: {
    packagingType: 0,
    conditionType: 0,
    inspectionResult: 1,
  },
  fieldList: [
    {
      label: '合同编号',
      value: 'contractNo',
      type: 'input',
      required: true,
    },
    {
      label: '使用部门',
      value: 'deptName',
      type: 'slot',
      required: true,
    },
    {
      label: '安装日期',
      value: 'installDate',
      type: 'date',
      required: true,
    },
    {
      label: '安装地点',
      value: 'installLocation',
      type: 'input',
      required: true,
    },
    {
      label: '产品名称',
      value: 'productName',
      type: 'input',
      required: true,
    },
    {
      label: '规格',
      value: 'standard',
      type: 'input',
      required: true,
    },
    {
      label: '生产厂家',
      value: 'brandName',
      type: 'input',
      required: true,
    },
    {
      label: '生产日期',
      value: 'productionDate',
      type: 'date',
      required: true,
      TimePickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6
        },
      },
    },
    {
      label: '批号',
      value: 'batchNumber',
      type: 'input',
    },
    {
      label: '供应商',
      value: 'supplierName',
      type: 'slot',
      required: true,
    },
    {
      label: '供应商电话',
      value: 'supplierPhone',
      type: 'input',
      required: true,
    },
    {
      label: '售后电话',
      value: 'supportPhone',
      type: 'input',
    },
    {
      label: '包装情况',
      value: 'packagingType',
      type: 'select-model',
      code: 'packaging_type',
      required: true,
    },
    {
      label: '器械情况',
      value: 'conditionType',
      type: 'select-model',
      code: 'condition_type',
      required: true,
    },
    {
      label: '注册证号',
      value: 'regCerNo',
      type: 'input',
    },
    {
      label: '检查结果',
      value: 'inspectionResult',
      type: 'select-model',
      code: 'inspection_result',
      required: true,
    },
    {
      label: '检查人',
      value: 'inspectorName',
      type: 'slot',
      required: true,
    },
    {
      label: '检查日期',
      value: 'inspectorDate',
      type: 'date',
      required: true,
    },
    {
      label: '资产',
      value: 'assetName',
      type: 'slot',
    },
    {
      label: '附件',
      value: 'filePathList',
      type: 'slot',
      className: 'not-br',
    },
  ],
  rules: {},
  labelWidth: '120px',
})
const selectUseDeptInfo = reactive({
  visible: false,
  query: {
    // deptAuth: 'id',
  },
})
const selectProductSupplier = reactive({
  visible: false,
  api: getSupplierPage,
  query: {
    // supplierAuth: 'supplierId',
  },
})
const selectUseUserInfo = reactive({
  visible: false,
  saveEmpty: true,
  query: {
    hasAllDept: 1,
  },
})
const selectAssetInfo = reactive({
  visible: false,
  query: {
    assetSourceAuth: true,
    statusMult: '3,6',
  },
  filterInfoList: [
    {
      type: 'input',
      label: '名称',
      value: 'assetNameLike',
    },
    {
      type: 'input',
      label: '编码',
      value: 'assetCodeLike',
    },
  ],
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emits('update:visible', newValue) // 更新父组件visible
  },
})

onMounted(() => {
  initRules()
  if (props.id) {
    getDeatil()
  }
})
// 初始化校验规则
function initRules() {
  formInfo.rules = proxy.$initRules(formInfo.fieldList)
  formInfo.rules.supplierPhone = [
    { required: true, message: '请输入供应商电话', trigger: 'blur' },
    { validator: proxy.$validate.cellphone, trigger: 'blur' },
  ]
  formInfo.rules.supportPhone = [
    { validator: proxy.$validate.cellphone, trigger: 'blur' },
  ]
}
function getDeatil() {
  getInspectionRecordById(props.id).then((resp) => {
    if (resp && resp.success) {
      let data = resp.data
      formInfo.data = data
      if (formInfo.data.filePath) {
        formInfo.data.filePathList = utils.splitArr(formInfo.data.filePath)
      }
    }
  })
}
function save(str) {
  formInfo.ref.validate((valid) => {
    if (valid) {
      if (formInfo.data.filePathList && formInfo.data.filePathList.length) {
        formInfo.data.filePath = String(formInfo.data.filePathList)
      } else {
        formInfo.data.filePath = ''
      }
      const api = props.id ? updateInspectionRecord : createInspectionRecord
      api(formInfo.data).then((resp) => {
        if (resp && resp.success) {
          if (str === 'save') {
            //保存
            showDialog.value = false
            emits('returnModify')
          } else if (str === 'saveAndCreate') {
            //保存并新增
            formInfo.data = {}
            emits('update:title', '新增用前检查记录')
          }
        }
      })
    }
  })
}

function openUseDeptWindow() {
  selectUseDeptInfo.visible = true
}
function selectUseDeptCallback(row) {
  if (row) {
    formInfo.data.deptId = row.id
    formInfo.data.deptName = row.name
  } else {
    formInfo.data.deptId = ''
    formInfo.data.deptName = ''
  }
}
function openSupplierWindow() {
  selectProductSupplier.visible = true
}
function selectSupplierCallback(row) {
  if (row) {
    formInfo.data.supplierId = row.supplierId
    formInfo.data.supplierName = row.supplierName
    formInfo.data.supplierPhone = row.contactNumber
  } else {
    formInfo.data.supplierId = ''
    formInfo.data.supplierName = ''
    formInfo.data.supplierPhone = ''
  }
}
function openUseUserList() {
  selectUseUserInfo.visible = true
}
function selectUseUserCallBack(row) {
  if (row) {
    formInfo.data.inspector = row.id
    formInfo.data.inspectorName = row.name
  } else {
    formInfo.data.inspector = ''
    formInfo.data.inspectorName = ''
  }
}
function openEquipmentWindow() {
  selectAssetInfo.visible = true
}
function callBackAsset(data) {
  selectAssetInfo.visible = false
  if (data) {
    formInfo.data['assetName'] = data.assetName
    formInfo.data['assetId'] = data.id
  } else {
    formInfo.data['assetName'] = ''
    formInfo.data['assetId'] = ''
  }
}
function handleResponse(response, file) {
  return response
}
</script>

<style scoped></style>
